<template>
  <div class="PoliceInformationAdd" :style="[{'zoom': zoom}]">
    <audio ref="feedbackAudio" muted loop>
      <source src="../../audio/feedback.mp3" type="audio/mp3"/>
    </audio>
    <div class="PoliceInformationStatistics">
      <div class="card first">
        <img class="icon" src="../../img/images/policeInformation/ic_jing01.png"/>
        <div class="_subcoat subcoat">
          <p class="value _value">{{ generalView.todayReceivedCount }}</p>
          <p class="title">本日已接收警情(条)</p>
        </div>
      </div>
      <div class="card second">
        <img class="icon" src="../../img/images/policeInformation/ic_jing02.png"/>
        <div class="_subcoat subcoat">
          <p class="value _value">{{ generalView.todaySettledCount }}</p>
          <p class="title">本日已处理警情(条)</p>
        </div>
      </div>
      <div class="card thirdly">
        <img class="icon" src="../../img/images/policeInformation/ic_jing03.png"/>
        <div class="_subcoat subcoat">
          <p class="value _value">{{ generalView.todayUnsettledCount }}</p>
          <p class="title">本日待处理警情(条)</p>
        </div>
      </div>
      <div class="card fourthly">
        <img class="icon" src="../../img/images/policeInformation/ic_jing04.png"/>
        <div class="_subcoat subcoat">
          <p class="value _value">{{ generalView.totalReceivedCount }}</p>
          <p class="title">总接收警情(条)</p>
        </div>
      </div>
      <div class="card fifth">
        <img class="icon" src="../../img/images/policeInformation/ic_jing05.png"/>
        <div class="_subcoat subcoat">
          <p class="value _value">{{ generalView.totalSettledCount }}</p>
          <p class="title">总处理警情(条)</p>
        </div>
      </div>
      <div class="add_btn_outline ">
        <div class="add_btn" @click="addPoliceInformation">
          <img class="icon" src="../../img/images/policeInformation/ic_jiahao.png"/>
          <p class="text">新增警情</p>
        </div>
      </div>
    </div>
    <div class="list-search">
      <div class="singe-search">
        <el-select v-model="pageForm.category" placeholder="请选择类别" @change="categoryChange" style="width: 100%;">
          <el-option
            v-for="item in categoryList"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey">
          </el-option>
        </el-select>
      </div>
      <div class="singe-search">
        <el-select v-model="pageForm.type" placeholder="请选择类型" :disabled="!pageForm.category" style="width: 100%;">
          <el-option
            v-for="item in typeList"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey">
          </el-option>
        </el-select>
      </div>
      <div class="singe-search">
        <el-input v-model="pageForm['caller']" placeholder="请输入报警人姓名" clearable></el-input>
      </div>
      <div class="singe-search">
        <el-input v-model="pageForm.callerPhone" placeholder="请输入报警电话" clearable></el-input>
      </div>
      <div class="singe-search">
        <el-radio-group v-model="pageForm.searchType">
          <el-radio :label="1">3天内</el-radio>
          <el-radio :label="2">1月内</el-radio>
          <el-radio :label="3">指定日期：</el-radio>
        </el-radio-group>
      </div>
      <div class="singe-search">
        <el-date-picker ref="daterange" v-model="daterange" type="daterange" range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>
      <div class="singe-search">
        <el-button class="singe-search-btn1" @click="queryList">查询</el-button>
        <el-button class="singe-search-btn2" @click="resetForm">重置</el-button>
      </div>
    </div>
    <div class="table-main">
      <el-table :data="tableData" style="width: 100%" :height="tableHeight">
        <el-table-column type="index" label="序号" width="70" align="center">
        </el-table-column>
        <el-table-column prop="category" label="类别" min-width="80" :formatter="formatterCategory">
        </el-table-column>
        <el-table-column prop="type" label="类型" min-width="80" :formatter="formatterType">
        </el-table-column>
        <el-table-column prop="caller" label="报警人" min-width="80">
        </el-table-column>
        <el-table-column prop="callerPhone" label="报警手机号" min-width="110">
        </el-table-column>
        <el-table-column prop="createTime" label="报警时间" min-width="150">
        </el-table-column>
        <el-table-column prop="wecomDept" label="部门" min-width="240" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="wecomOfficer" label="出警人" min-width="120">
        </el-table-column>
        <el-table-column prop="smsList" label="短信发送" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.smsList.length === 0" style="color: #EB5757;">未发送</span>
            <div v-else @click="handleOpenSmsSendingSituationDialog(scope.row)"
                 style="width: 66px;height: 26px;margin-left: 10px; background: rgba(85,144,200,0.05);border-radius: 2px 2px 2px 2px;
                 opacity: 1;border: 1px solid rgba(54,121,222,0.55); text-align: center; cursor: pointer;">
              {{ scope.row.smsList.length }}条
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="smsLastSendTime" label="最新发送时间" min-width="150">
        </el-table-column>
        <el-table-column prop="field7" label="出警地图" min-width="100">
          <template slot-scope="scope">
            <img style="width: 63px; height: 34px; cursor: pointer;" v-if="scope.row.feedBackList.length > 0"
                 src="../../img/images/policeInformation/ic_ditu.png"
                 @click="handleOpenPoliceInformationMapDialog(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="通知出警" min-width="90" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">是</span>
            <span style="color: #EB5757" v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center" :resizable="false">
          <template slot-scope="scope" v-if="scope.row.status === 0">
            <el-button type="text" @click="handlerSendSms(scope.row)" v-if="scope.row.smsList.length === 0"
                       :disabled="scope.row.status === 1"
                       style="color:#EB5757;margin-left: 15px; margin-right: 15px;font-size:14px">发送短信
            </el-button>
            <el-button type="text" @click="handlerSendSms(scope.row)" v-else
                       :disabled="scope.row.status === 1"
                       style="color:#2E488B;margin-left: 15px; margin-right: 15px;font-size:14px">重发短信
            </el-button>
            <span style="color:#C1D3EE;">|</span>
            <el-button type="text" @click="handleOpenPoliceInformationMapDialog(scope.row)"
                       style="color:#2E488B;margin-left: 15px; margin-right: 15px;font-size:14px">出警
            </el-button>
            <span style="color:#C1D3EE;" v-if="scope.row.smsList.length === 0">|</span>
            <el-button type="text" @click="handlerEdit(scope.row)"
                       v-if="scope.row.smsList.length === 0"
                       style="color:#2E488B;margin-left: 15px; margin-right: 15px;font-size:14px">编辑
            </el-button>
            <span style="color:#C1D3EE;" v-if="scope.row.smsList.length === 0">|</span>
            <el-button type="text" v-if="scope.row.smsList.length === 0"
                       @click="handlerDelete(scope.row)"
                       style="color: #2E488B;margin-left: 15px;font-size:14px">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageForm.current" :page-sizes="[10, 20, 50, 100]" :page-size="pageForm.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="pageForm.total">
      </el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="addPoliceInformationDialogVisible" width="728px"
               :before-close="handleCloseAddPoliceInformationDialog" append-to-body destroy-on-close
               :close-on-click-modal="false" custom-class="addDialog" top="50px">
      <el-form :model="addForm" :rules="rules" ref="addForm" label-position="top" label-width="100px">
        <el-form-item label="报警人：" prop="caller">
          <el-input v-model="addForm.caller" placeholder="请输入报警人姓名"></el-input>
        </el-form-item>
        <el-form-item label="报警电话：" prop="callerPhone">
          <el-input v-model="addForm.callerPhone" placeholder="请输入报警电话"></el-input>
        </el-form-item>
        <el-form-item label="类别：" prop="category">
          <el-select v-model="addForm.category" placeholder="请选择类别" @change="categoryChange" style="width: 100%;">
            <el-option
              v-for="item in categoryList"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型：" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择类型" :disabled="!addForm.category" style="width: 100%;">
            <el-option
              v-for="item in typeList"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址：" prop="address">
          <el-input v-model="addressDef" style="width: 30%;" v-bind:disabled=true ></el-input>-<el-input v-model="addForm.address" placeholder="请输入地址" style="width: 69%;"></el-input>
        </el-form-item>
        <el-form-item label="其他说明：" prop="remake">
          <el-input type="textarea" :rows="5" v-model="addForm.remark" placeholder="请输入说明"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
					<el-button @click="handleCloseAddPoliceInformationDialog" size="small">
						取 消
					</el-button>
					<el-button type="primary" @click="submitDialog" size="small" style="backgroud-color:#2E488B">
						提 交
					</el-button>
				</span>
    </el-dialog>
    <el-dialog title="短信发送情况" :visible.sync="smsSendingSituationDialogVisible" width="728px"
               :before-close="handleCloseSmsSendingSituationDialog" append-to-body destroy-on-close
               :close-on-click-modal="false"
               custom-class="smsSendingSituationDialog">
      <el-table :data="smsList" style="width: 100%; margin-bottom: 30px;" height="280" border>
        <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
        <el-table-column min-width="120" label="报警人" :show-overflow-tooltip="true" prop="sender">
        </el-table-column>
        <el-table-column min-width="120" label="报警手机号" :show-overflow-tooltip="true" prop="receiverPhone">
        </el-table-column>
        <el-table-column min-width="120" label="发送时间" :show-overflow-tooltip="true" prop="createTime">
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="出警地图" :visible.sync="policeInformationMapDialogVisible" width="1160px" top="50px"
               :before-close="handleClosePoliceInformationMapDialog" append-to-body destroy-on-close
               :close-on-click-modal="false" custom-class="policeInformationMapDialog">
      <el-table ref="singleTable" :data="tableData2" style="width: 100%; margin-bottom: 24px;" height="250" border
                highlight-current-row
                @current-change="handleTable2CurrentChange">
        <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
        <el-table-column min-width="70" label="报警人" :show-overflow-tooltip="true" prop="caller">
        </el-table-column>
        <el-table-column min-width="90" label="报警手机号" :show-overflow-tooltip="true" prop="callerPhone">
        </el-table-column>
        <el-table-column min-width="120" label="地址反馈时间" :show-overflow-tooltip="true" prop="feedbackTime">
        </el-table-column>
        <el-table-column min-width="120" label="地图地址" :show-overflow-tooltip="true" prop="mapAddress">
        </el-table-column>
        <el-table-column min-width="140" label="经纬度信息" :show-overflow-tooltip="true" prop="coordinates">
        </el-table-column>
        <el-table-column min-width="120" label="部门" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-select v-model="scope.row.deptId" placeholder="请选择部门" @change="deptChange(scope.row, $event)">
              <el-option
                v-for="item in scope.row.deptList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column min-width="120" label="部门负责人" :show-overflow-tooltip="true" prop="leader">
        </el-table-column>
      </el-table>
      <div class="map" id="map">
      </div>
      <span slot="footer" class="dialog-footer">
				<el-button @click="handleClosePoliceInformationMapDialog" v-if="isShowPoliceBut">取消</el-button>
				<el-button type="primary" @click="submitMap" v-if="isShowPoliceBut">快速出警</el-button>
			</span>
    </el-dialog>

    <el-dialog title="快速出警" :visible.sync="wecomTreeVisible" width="510px" top="30px" height="700px"
               :before-close="handleCloseWecomDialog" append-to-body destroy-on-close
               :close-on-click-modal="false" custom-class="policeInformationMapDialog">
      <div class="scrollable-div">
        <el-input
          placeholder="输入警员名称进行过滤"
          v-model="filterText"
          clearable
          size="small">
        </el-input>
        <el-tree ref="tree"
                 :data="treeData"
                 :props="defaultProps"
                 @node-click="handleNodeClick"
                 show-checkbox
                 @check-change="handleCheckChange"
                 :check-strictly="true"
                 :filter-node-method="filterNode"
                 node-key="id">
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
				<el-button @click="handleCloseWecomDialog">取消</el-button>
				<el-button type="primary" @click="sendPolice">确定</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  getDetails,
  getGeneralView,
  submit,
  deletePolicesituation
} from '../../api/policeInformation/add.js';
import {
  getWecomTree, sendMsg
} from '../../api/policeInformation/list.js';
import {
  sendSms
} from '../../api/sms/index.js';
import AMapLoader from '@amap/amap-jsapi-loader';
import {getDictionary} from '@/api/system/dict';
import {copyText} from '@/util/util';
import {init as initWebSocket, close as closeWebSocket} from '@/util/webSocket';
import {
  mapGetters
} from "vuex";

var validatePhone = (rule, value, callback) => {
  if (!(/^1[3456789]\d{9}$/.test(value))) {
    callback(new Error('请输入正确的手机号码'));
  } else {
    callback();
  }
};

export default {
  name: 'PoliceInformationAdd',
  data() {
    return {
      width: 1848,
      zoom: 1,
      treeData: [],
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'label',
        disabled: function (data, node) {
          return data.type == 1
        }
      },
      wecomTreeVisible: false,
      generalView: {},
      daterange: [],
      pageForm: {
        current: 1,
        size: 10,
        total: 0,
        caller: '',
        callerPhone: '',
        searchType: 3
      },
      addressDef: '辽宁省沈阳市辽中县',
      tableData: [],
      title: '',
      addPoliceInformationDialogVisible: false,
      addForm: {},
      rules: {
        caller: [{
          required: true,
          message: '请填写报警人',
          trigger: 'blur'
        }],
        callerPhone: [{
          required: true,
          message: '请填写报警电话',
          trigger: 'blur'
        }, {validator: validatePhone, trigger: 'blur'}],
        category: [{
          required: true,
          message: '请选择类别',
          trigger: 'change'
        }],
        type: [{
          required: true,
          message: '请选择类型',
          trigger: 'change'
        }],
        address: [{
          required: true,
          message: '请填写地址',
          trigger: 'blur'
        }]
      },
      smsSendingSituationDialogVisible: false,
      policeInformationMapDialogVisible: false,
      isShowPoliceBut: true,
      tableData2: [],
      smsList: [],
      AMap: undefined,
      map: undefined,
      polygon: undefined,
      marker: undefined,
      lngLat: undefined,

      currentPSInfo: {},
      currentFeedbackData: {},
      getListTimeout: undefined,
      categoryMap: {},
      categoryList: [],
      categoryTypeMap: {},
      typeMap: {},
      typeList: [],
      // wsUrl: 'wss://wx.luenmeilz.com:8443/ws/heatSourceList/2/101'
      // wsUrl: 'ws://127.0.0.1:8030/ws/heatExchangeStationList/2/101',
      wsUrl: 'ws://47.93.213.72:18030/ws/heatExchangeStationList/',
      topic: '/user/admin/policSituation/feedback'
    }
  },
  computed: {
    tableHeight() {
      let h = document.body.clientHeight - 443;
      return h;
    },
    ...mapGetters(["userInfo"])
  },
  filters: {},
  mounted() {
    let self = this;
    window.addEventListener('resize', () => {
      self.getZoom();
    });
    this.getZoom();
    this.getCategory();
    this.getGeneralView();
    this.initWebSocket();
  },
  beforeDestroy() {
    if (this.getListTimeout) {
      clearTimeout(this.getListTimeout);
      this.getListTimeout = undefined;
    }
    closeWebSocket();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    initWebSocket() {
      let {user_id, dept_id} = this.userInfo;
      let wsUrl = this.wsUrl + user_id + "/" + dept_id;
      initWebSocket(wsUrl, this.webSocketMessageHandler);
    },
    webSocketMessageHandler(e) {
      if (e !== 'heartbeat') {
        this.getList();
        if (this.$refs['feedbackAudio']) {
          this.playAudio();
        }
        this.$notify({
          title: '提示',
          message: e,
          type: 'warning',
          duration: 0,
          onClose: () => {
            if (this.$refs['feedbackAudio']) {
              this.$refs['feedbackAudio'].pause();
            }
          }
        });
      }
    },
    playAudio() {
      if (this.$refs['feedbackAudio'].muted) {
        this.$refs['feedbackAudio'].muted = false;
      }
      this.$refs['feedbackAudio'].click();
      this.$refs['feedbackAudio'].play();
    },
    getZoom() {
      let self = this;
      let w = document.body.clientWidth;
      if (w < self.width) {
        self.zoom = (w / self.width) - 0.1;
      } else {
        self.zoom = 1;
      }
    },
    formatterCategory(row, column, cellValue, index) {
      return this.categoryMap[cellValue];
    },
    formatterType(row, column, cellValue, index) {
      return this.typeMap[row.category + '_' + cellValue];
    },
    // 警情类别
    getCategory() {
      let self = this;
      getDictionary({code: 'police_biz_category'}).then(res => {
        let {data} = res.data;
        self.categoryList = data;
        if (data && data.length > 0) {
          let categoryMap = {};
          data.forEach(item => {
            categoryMap[item.dictKey] = item.dictValue;
            self.getType(item.dictKey);
          })
          self.categoryMap = categoryMap;
        }
        self.queryList();
      })
    },
    // 警情类型
    getType(category) {
      let self = this;
      getDictionary({code: 'police_category_' + category}).then(res => {
        let {data} = res.data;
        if (data && data.length > 0) {
          self.categoryTypeMap[category] = data;
          data.forEach(item => {
            self.typeMap[category + '_' + item.dictKey] = item.dictValue;
          })
        }
      })
    },
    categoryChange(category) {
      this.typeList = this.categoryTypeMap[category];
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      console.log(data);
    },
    loadWecomTree() {
      getWecomTree().then(res => {
        const {data, code} = res.data;
        if (code === 200) {
          this.treeData = data;
        }
      })
    },
    // 关闭警情地图弹框
    handleCloseWecomDialog: function () {
      this.wecomTreeVisible = false
    },
    extractFatherNames(tree, ids, result) {
      for (let node of tree) {
        if (node.children && node.children.length > 0) {
          this.extractFatherNames(node.children, ids, result);
        }
        if (node.children && node.children.some(child => ids.includes(child.id))) {
          result.push(node.label);
        }
      }
    },
    extractNames(tree, ids, result) {
      for (let node of tree) {
        if (ids.includes(node.id)) {
          result.push(node.label);
        }
        if (node.children && node.children.length > 0) {
          this.extractNames(node.children, ids, result);
        }
      }
    },
    sendPolice() {
      let self = this;
      let coordinates = this.currentFeedbackData.coordinates;
      if (this.currentPSInfo.status === 0 || (this.currentPSInfo.status === 1 && coordinates)) {
        let userIds = this.$refs.tree.getCheckedKeys();
        if (userIds.length === 0) {
          this.$message({
            message: '请选择警员',
            type: 'warn'
          });
          return;
        }
        // 遍历treeData ，将符合userids中元素的字段的name值拿出来
        let deptNames = [];
        this.extractFatherNames(this.treeData, userIds, deptNames);
        let userNames = []
        this.extractNames(this.treeData, userIds, userNames);
        console.log('deptNames', deptNames)
        console.log('userNames', userNames)
        let content = "" // 信息内容
        let id = "" // 警情id
        let base64 = undefined;
        let url = undefined;
        let feedbackId = undefined;
        if (!this.currentFeedbackData.id) {
          content = "警情信息\n" +
            "报警人：" + this.currentPSInfo.caller + "\n" +
            "联系电话：" + this.currentPSInfo.callerPhone + "\n" +
            "地址：" + this.currentPSInfo.address;
          id = this.currentPSInfo.id
        } else {
          content = "警情信息\n" +
            "报警人：" + this.currentPSInfo.caller + "\n" +
            "联系电话：" + this.currentPSInfo.callerPhone + "\n" +
            "地址：" + this.currentFeedbackData.mapAddress;
          id = this.currentPSInfo.id
          base64 = self.base64Url
          feedbackId = this.currentFeedbackData.id;
          // url = "https://m.amap.com/share/index/lnglat=" + coordinates + "&name=" + encodeURIComponent(this.currentFeedbackData.mapAddress) + "&src=uriapi&callnative=1";
        }
        let data = {
          "id": id,
          "userList": userIds,
          "deptNames": [...new Set(deptNames)].join(","),
          "userNames": userNames.join(","),
          "content": content,
          "base64": base64,
          "feedbackId": feedbackId
        }
        this.sendMsg(data);
      } else {
        this.$message({
          message: '坐标有误',
          type: 'warning'
        });
      }
    },
    sendMsg(data) {
      sendMsg(data).then(res => {
        const {data, code} = res.data;
        if (code === 200) {
          this.$message({
            message: '出警成功',
            type: 'success'
          });
          self.queryList();
          self.getGeneralView();
          self.handleCloseWecomDialog();
          self.handleClosePoliceInformationMapDialog();
        }
      })
    },
    handlerEdit(row) {
      let self = this;
      getDetails(row.id).then(res => {
        const {data, code} = res.data;
        if (code === 200) {
          self.addForm = data;
          if (data && data.category) {
            self.categoryChange(data.category);
          }
          self.title = '修改警情';
          self.addPoliceInformationDialogVisible = true;
        }
      })
    },
    handlerDelete(row) {
      let self = this;
      this.$confirm('此操作将永久删除该警情, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePolicesituation(row.id).then(res => {
          const {code} = res.data;
          if (code === 200) {
            self.queryList();
          }
        })
      });
    },
    statusFormatter(row, column, cellValue, index) {
      if (1 === cellValue) {
        return "是";
      } else {
        return "否";
      }
    },
    submitDialog() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          this.submit();
        }
      });
    },
    //提交新增/编辑信息
    submit() {
      let self = this;
      this.addForm.status = 0;
      submit(this.addForm).then((res) => {
        const {code} = res.data;
        if (code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          self.addForm = {};
          if (this.$refs['addForm']) {
            this.$refs['addForm'].clearValidate();
            this.$refs['addForm'].resetFields();
          }
          self.queryList();
          self.getGeneralView();
          self.handleCloseAddPoliceInformationDialog();
        }
      });
    },
    resetForm() {
      this.pageForm = {
        current: 1,
        size: 20,
        total: 0,
        caller: '',
        callerPhone: '',
        searchType: 3
      };
      this.daterange = [];
      this.getList();
    },
    handleSizeChange(val) {
      this.pageForm.current = 1;
      this.pageForm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageForm.current = val;
      this.getList();
    },
    queryList() {
      this.pageForm.current = 1;
      this.getList();
    },
    // 列表查询
    getList: function () {
      if (this.getListTimeout) {
        clearTimeout(this.getListTimeout);
        this.getListTimeout = undefined;
      }
      let self = this;
      if (this.daterange) {
        this.pageForm.startDate = this.daterange[0];
        this.pageForm.endDate = this.daterange[1];
      } else {
        this.pageForm.startDate = undefined
        this.pageForm.endDate = undefined
      }
      getList(this.pageForm).then(res => {
        const {data, code} = res.data;
        if (code === 200) {
          console.log("列表查询返回值", data);
          self.tableData = data.records;
          self.pageForm.total = res.data.data.total;
          self.pageForm.size = res.data.data.size;
        }
      })
      this.getListTimeout = setTimeout(() => {
        self.getList();
      }, 30 * 1000);
    },
    // 获取概览
    getGeneralView() {
      let self = this;
      getGeneralView().then(res => {
        const {data, code} = res.data;
        if (code === 200) {
          self.generalView = data;
        }
      })
    },
    // 新增警情
    addPoliceInformation: function () {
      this.title = '新增警情';
      this.addPoliceInformationDialogVisible = true;
      this.addForm = {};
      if (this.$refs['addForm']) {
        this.$refs['addForm'].clearValidate();
        this.$refs['addForm'].resetFields();
      }
    },
    // 关闭新增警情弹框
    handleCloseAddPoliceInformationDialog: function () {
      this.addPoliceInformationDialogVisible = false;
    },
    // 打开短信发送情况弹框
    handleOpenSmsSendingSituationDialog: function (row) {
      this.smsList = row.smsList;
      this.smsSendingSituationDialogVisible = true;
    },
    // 关闭短信发送情况弹框
    handleCloseSmsSendingSituationDialog: function () {
      this.smsSendingSituationDialogVisible = false;
    },
    handleTable2CurrentChange(row) {
      this.currentFeedbackData = row;
      if (row && row.coordinates && this.map && this.AMap) {
        this.map.clearMap();
        let lngLat = row.coordinates.split(",");
        let self = this;
        this.$nextTick(() => {
          let marker = new self.AMap.Marker({
            position: new self.AMap.LngLat(lngLat[0], lngLat[1]),
            anchor: 'bottom-center',
          });
          self.map.add(marker);
          self.map.setFitView(marker);
          self.map.setZoom(14);
        })
      } else {
        this.lngLat = row.coordinates.split(",");
      }
    },
    deptChange(row, e) {
      let leader = '';
      console.log(row, e);
      row.deptList.forEach(item => {
        if (item.id === e) {
          leader = item.leader;
        }
      })
      // this.$set(row, 'deptId', e);
      this.$set(row, 'leader', leader);
    },
    handlerSendSms(row) {
      let data = {
        phone: row.callerPhone,
        policeSituationId: row.id
      }
      let self = this;
      sendSms(data).then(res => {
        const {code} = res.data;
        if (200 === code) {
          this.$message({
            message: '短信已发送',
            type: 'success'
          });
          self.queryList();
          self.getGeneralView();
        } else {
          this.$message({
            message: '短信发送失败',
            type: 'error'
          });
        }
      })
    },
    submitMap() {
      let content;
      let url;
      if (!this.currentFeedbackData.id) {
        content = "警情信息\n" +
          "报警人：" + this.currentPSInfo.caller + "\n" +
          "联系电话：" + this.currentPSInfo.callerPhone + "\n" +
          "地址：" + this.currentPSInfo.address;
      } else {
        content = "警情信息\n" +
          "报警人：" + this.currentPSInfo.caller + "\n" +
          "联系电话：" + this.currentPSInfo.callerPhone + "\n" +
          "地址：" + this.currentFeedbackData.mapAddress + "\n";
        url = "https://m.amap.com/share/index/lnglat=" + this.currentFeedbackData.coordinates + "&name=" + encodeURIComponent(this.currentFeedbackData.mapAddress) + "&src=uriapi&callnative=1";
      }
      let data = {
        "id": this.currentPSInfo.id,
        "content": content,
        "feedbackId": this.currentFeedbackData.id
      }
      this.sendMsg(data);
      content += url;
      copyText(content, this);
      // let self = this;
      // const element = document.getElementById('map'); // 替换为目标元素的id或class
      // const x = 200;
      // html2canvas(element, {
      //   useCORS: true,
      //   allowTaint: true,
      //   taintTest: true,
      //   width: element.offsetWidth - 2 * x,
      //   height: element.offsetHeight,
      //   x: x,
      //   y: 0
      // }).then((canvas) => {
      //   self.base64Url = canvas.toDataURL('image/png', 1.0);
      //   // self.loadWecomTree();
      //   // self.wecomTreeVisible = true;
      // });
    },

    // 打开警情地图弹框
    handleOpenPoliceInformationMapDialog: function (row) {
      let self = this;
      this.currentPSInfo = row;
      if (row.feedBackList && row.feedBackList.length > 0) {
        this.currentFeedbackData = row.feedBackList[0];
        this.tableData2 = row.feedBackList;
        this.lngLat = this.tableData2[0].coordinates.split(',');
        console.log("tableData2", this.tableData2);
        this.tableData2.forEach(item => {
          item.caller = row.caller;
          item.callerPhone = row.callerPhone;
          if (item.deptList && item.deptList.length > 0) {
            item.deptId = item.deptList[0].id;
            self.deptChange(item, item.deptId);
          }
        });
        this.policeInformationMapDialogVisible = true;
        if (row.status === 1) {
          this.isShowPoliceBut = false;
        } else {
          this.isShowPoliceBut = true;
        }
        this.initAMap();
        this.$nextTick(() => {
          if (self.$refs.singleTable) {
            self.$refs.singleTable.setCurrentRow(self.tableData2[0]);
          }
        })
      } else {
        this.$confirm('报警人未上传位置信息, 是否继续出警?', '请确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // self.loadWecomTree();
          // self.wecomTreeVisible = true;
          let content = "警情信息\n" +
            "报警人：" + this.currentPSInfo.caller + "\n" +
            "联系电话：" + this.currentPSInfo.callerPhone + "\n" +
            "地址：" + this.currentPSInfo.address;
          let data = {
            "id": this.currentPSInfo.id,
            "content": content,
            "feedbackId": this.currentFeedbackData.id
          }
          this.sendMsg(data);
          copyText(content, this);
        });
      }
    },
    // 关闭警情地图弹框
    handleClosePoliceInformationMapDialog: function () {
      this.currentFeedbackData = {};
      this.currentPSInfo = {};
      this.policeInformationMapDialogVisible = false;
      this.AMap = undefined;
      this.polygon = undefined;
      this.marker = undefined;
      if (this.map) {
        this.map.destroy();
        this.map = undefined;
      }
    },
    // 初始化地图
    initAMap() {
      let self = this;
      AMapLoader.load({
        key: "5da1f8bb31f8532695a0fb696d584fae", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Polygon', 'AMap.Marker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        //加载 AMapUI
        AMapUI: {
          version: "1.1", // AMapUI 版本
        }
      })
        .then((AMap) => {
          self.AMap = AMap;
          self.map = new AMap.Map("map", {
            WebGLParams: {
              preserveDrawingBuffer: true
            },
            // 设置地图容器id
            // viewMode: "3D", // 是否为3D地图模式
            zoom: 14, // 初始化地图级别
            center: [122.766159, 41.517449], // 初始化地图中心点位置，沈阳中心点
          });
          console.log("self.lngLat", self.lngLat, self.lngLat[0], self.lngLat[1]);
          let marker = new self.AMap.Marker({
            position: new self.AMap.LngLat(self.lngLat[0], self.lngLat[1]),
            anchor: 'bottom-center',
          });
          self.map.add(marker);
          self.map.setFitView(marker);
          self.map.setZoom(14);
        })
        .catch((e) => {
          console.log(e);
        });
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../styles/page/list';

.PoliceInformationAdd {
  width: 100%;
  height: 100%;

  .PoliceInformationStatistics {
    width: 100%;
    height: 168px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .card {
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      border: 1px solid;
      margin: 0 10px;
      position: relative;

      .icon {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 20px;
        left: 0px;
      }

      ._subcoat {
        margin: 9px 12px;
        width: 252px;
        height: 102px;
        text-align: center;

        .value {
          font-size: 34px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          margin: 0;
          padding: 10px;
        }

        .title {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #5E6B7F;
          margin: 0;
          padding: 10px;
        }
      }
    }

    .first {
      margin-left: 25px;
      background: linear-gradient(180deg, #F6F3DE 0%, #FFFFFF 100%);
      box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
      border-image: linear-gradient(180deg, rgba(222, 175, 132, 0.49), rgba(222, 202, 132, 0)) 1 1;

      .subcoat {
        background: linear-gradient(180deg, #F6F3DE 0%, #FFFFFF 100%);
        box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(222, 175, 132, 0.49), rgba(222, 202, 132, 0)) 1 1;

        ._value {
          color: #2A334D;
        }
      }
    }

    .second {
      background: linear-gradient(180deg, #D8EDFD 0%, #FFFFFF 100%);
      box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
      border-image: linear-gradient(180deg, rgba(54, 141, 222, 0.37), rgba(54, 121, 222, 0)) 1 1;

      .subcoat {
        background: linear-gradient(180deg, #D8EDFD 0%, #FFFFFF 100%);
        box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(54, 141, 222, 0.37), rgba(54, 121, 222, 0)) 1 1;

        ._value {
          color: #3679DE;
        }
      }
    }

    .thirdly {
      background: linear-gradient(180deg, #FFF4ED 0%, #FFFFFF 100%);
      box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
      border-image: linear-gradient(180deg, rgba(255, 208, 202, 1), rgba(255, 255, 255, 1)) 1 1;

      .subcoat {
        background: linear-gradient(180deg, #FFF4ED 0%, #FFFFFF 100%);
        box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(255, 208, 202, 1), rgba(255, 255, 255, 1)) 1 1;

        ._value {
          color: #EB5757;
        }
      }
    }

    .fourthly {
      background: linear-gradient(180deg, #E9F2FF 0%, #FFFFFF 100%);
      box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
      border-image: linear-gradient(180deg, rgba(54, 131, 222, 0.44), rgba(54, 121, 222, 0)) 1 1;

      .subcoat {
        background: linear-gradient(180deg, #E9F2FF 0%, #FFFFFF 100%);
        box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(54, 131, 222, 0.44), rgba(54, 121, 222, 0)) 1 1;

        ._value {
          color: #2A334D;
        }
      }
    }

    .fifth {
      margin-right: 25px;
      background: linear-gradient(180deg, #D8EDFD 0%, #FFFFFF 100%);
      box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
      border-image: linear-gradient(180deg, rgba(54, 141, 222, 0.37), rgba(54, 121, 222, 0)) 1 1;

      .subcoat {
        background: linear-gradient(180deg, #D8EDFD 0%, #FFFFFF 100%);
        box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(54, 141, 222, 0.37), rgba(54, 121, 222, 0)) 1 1;

        ._value {
          color: #2A334D;
        }
      }
    }

    .add_btn_outline {
      width: 120px;
      height: 120px;
      background: linear-gradient(180deg, #E4ECFF 0%, #FFFFFF 100%);
      box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      border: 1px solid #2E488B;

      .add_btn {
        width: 100px;
        height: 100px;
        background: #2E488B;
        box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid #2E488B;
        margin: 9px;
        text-align: center;
        cursor: pointer;

        .icon {
          width: 22px;
          height: 22px;
          margin: 29px 40px 0 40px;

        }

        .text {
          font-size: 16px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          color: #FFFFFF;
          margin-top: 5px;
        }
      }
    }
  }

  .list-search {
    padding: 0;
    padding-left: 25px;
    margin-bottom: 20px;

    .singe-search {
      width: auto;
      height: auto;
      line-height: 36px;
      margin-top: 5px;

      .el-input {
        width: 200px;
        height: 37px;

        ::v-deep .el-input__inner {
          height: 36px;
          line-height: 36px;
        }
      }

      .el-date-editor {
        width: 230px;
        height: 36px;
      }

      .singe-search-btn1 {
        width: 88px !important;
        height: 36px !important;
        background: #2E488B !important;
        box-shadow: 0px 1px 1px 0px rgba(123, 144, 176, 0.21) !important;
        border-radius: 4px 4px 4px 4px !important;
        opacity: 1 !important;
        padding: 0 !important;

        font-size: 14px !important;
        font-family: PingFang SC-Regular, PingFang SC !important;
        font-weight: 400 !important;
        color: #FFFFFF !important;
      }

      .singe-search-btn2 {
        width: 88px !important;
        height: 36px !important;
        background: #FFFFFF !important;
        box-shadow: 0px 1px 1px 0px rgba(123, 144, 176, 0.21) !important;
        border-radius: 4px 4px 4px 4px !important;
        opacity: 1 !important;
        border: 1px solid #C1D3EE !important;
        padding: 0 !important;

        font-size: 14px !important;
        font-family: PingFang SC-Regular, PingFang SC !important;
        font-weight: 400 !important;
        color: #2E488B !important;
      }
    }
  }

  .table-main {
    margin-left: 25px;
  }
}

::v-deep .policeInformationMapDialog {
  .el-dialog__body {
    max-height: 700px;

    .el-table td, .el-table th {
      padding: 1px;
      height: 35px;
    }
  }

  .map {
    width: 1115px;
    height: 384px;
    box-shadow: 0px 6px 40px 5px rgba(0, 0, 0, 0.03), 0px 6px 8px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid rgba(54, 121, 222, 0.5);
  }
}


.scrollable-div {
  width: 90%; /* 设置 div 的宽度 */
  margin: 0 auto;
  height: 550px; /* 设置 div 的高度 */
  overflow: auto; /* 垂直方向上显示滚动条 */
  border: 1px solid #ccc; /* 边框样式 */
  padding: 15px; /* 内边距 */
}

// 不可全选样式
::v-deep .el-tree-node {
  .is-leaf + .el-checkbox .el-checkbox__inner {
    display: inline-block;
  }

  .el-checkbox .el-checkbox__inner {
    display: none;
  }
}


</style>
